import {useEffect, useState} from 'react'
import {affirm_orderList, orderSave, siteDefault, siteList} from '@/api'
import settle from '@/pages/settle/index.module.scss'
import Token from '@/component/Token'
import {SettleShoppingListType} from '@/type/settle'
import config from '@/static/config'
import {BackIcon} from '@/component/BackIcon'
import {NavigateFunction, useNavigate} from 'react-router-dom'
import {shippingAddressColumns, shippingAddressList} from '@/pages/shippingAddress'
import {Button, message, Popconfirm, Table} from 'antd'
import Base64 from '@/utils/base64'

type FooterProps = {
	total: number,
	navigate:  NavigateFunction
	list:  SettleShoppingListType[]
}
const Footer = (props: FooterProps) => {

	const goBack = () => {
		props.navigate('/home/shopping', {
			replace: true
		})
	}

	const goOrder = () => {
		orderSave({
			list: props.list
		}).then(res => {
			if (res.code === 200) {
				console.log(res.data)
				const str = res.data.join(",")

				const base = new Base64()

				const strs = `ids=${str}`

				props.navigate(`/home/order/${base.encode(strs)}`,{
					replace: true
				})
			}
		})
	}


	return (
		<div className={settle.settle_footer}>
			<div className={settle.settle_footer_tfoot}>
				<div>
					<div className={settle.settle_footer_tfoot_box}>
						<div className={settle.realpay}>
							<span className={settle.realpay_title}>实付款：</span>
							<span className={settle.realpay_price_symbol}>&yen;</span>
							<span className={settle.realpay_price}>{props.total.toFixed(2)}</span>
						</div>
						<div className={settle.confirmAddr}>
							<span>寄送至：</span>
							<span></span>
						</div>
						<div className={settle.confirmAddrUser}>
							<span>收货人：</span>
							<span></span>
						</div>
					</div>
				</div>
				<div className={settle.wrapperBox}>
					<div className={settle.wrapper}>
						<span onClick={goBack} className={settle.wrapper_goBack}><BackIcon size={14}></BackIcon>返回购物车</span>
						<span onClick={goOrder} className={settle.wrapper_goBtn}>提交订单</span>
					</div>
				</div>
			</div>
		</div>
	)
}

const Body = (props: { list: SettleShoppingListType[] }) => (
	<div>
		<h2>确认订单信息</h2>
		<div className={settle.settle_body}>
			<div className={settle.settle_body_thead}>
				<div>商品信息</div>
				<div>单价</div>
				<div>折扣价</div>
				<div>数量</div>
				<div>小计</div>
			</div>
			<div className={settle.settle_body_tbody}>
				{
					props.list.map((item, i) => (
						<div className={settle.settle_body_tbody_row} key={i}>
							<div>
								<img width={80} height={80} src={config.productImgUrl + item.product_pic} alt=""/>
								<span>{item.product_name}</span>
							</div>
							<div>{item.cart_money.toFixed(2)}</div>
							<div>{item.discount ? item.discount.toFixed(2) : ""}</div>
							<div>{item.cart_num}</div>
							<div>{item.discount ? (item.discount * item.cart_num).toFixed(2) : (item.cart_money * item.cart_num).toFixed(2)}</div>
						</div>
					))
				}
			</div>
		</div>
	</div>
)

const Settle = () => {
	const navigate = useNavigate()
	const [shoppingList, setShoppingList] = useState<SettleShoppingListType[]>([])
	const [total, setTotal] = useState<number>(0)
	const [SiteList, setSiteList] = useState<shippingAddressList[]>([])

	useEffect(() => {
		affirm_orderList().then(res => {
			setShoppingList(res.data)
			let num = 0
			for (const item of res.data) {
				if (item.discount) {
					num += (item.discount * item.cart_num)
				}else{
					num += (item.cart_money * item.cart_num)
				}
			}
			setTotal(num)
		})
		getList()
	}, [])

	function getList () {
		siteList().then(res => {
			if (res.code === 200) {
				setSiteList(res.data.sort((a, b) => b.isDefault - a.isDefault))
			}
		})
	}

	const columns = shippingAddressColumns((text: number, record:shippingAddressList) => {
		if (text === 0) {
			return (
				<Popconfirm
					title={"是否设为默认地址"}
					okText="是"
					cancelText="否"
					onConfirm={() => {
						siteDefault({
							id: record.id
						}).then(res =>{
							if (res.code === 200) {
								getList()
								message.success(res.message)
							}
						})
					}}
				>
					<Button type={"primary"}>设为默认地址</Button>
				</Popconfirm>
			)
		}
		if (text === 1) {
			return "当前为默认地址"
		}
	})

	return (
		<Token>
			<div className={settle.settle}>
				<div className={settle.settle_header}>
					<header>
						<h2>确认收货地址</h2>
						<div><span onClick={() => navigate('/personal/shippingAddress',{
							replace: true
						})}>管理收货地址</span></div>
					</header>
					<div style={{
						padding: 10
					}}>
						<Table
							pagination={false}
							columns={columns}
							size={"small"}
							dataSource={SiteList}
							bordered
						>
						</Table>
					</div>
				</div>
				<Body list={shoppingList}></Body>
				<Footer navigate={navigate} total={total} list={shoppingList}></Footer>
			</div>
		</Token>
	)
}
export default Settle
